<template>
	<view class="orderItem order-list">
		<view class="" v-if="list.length > 0">
			<view class="bg-white list-item margin-bottom-sm flex-start align-start col-1" v-for="(item,index) in list"
				:key="index" @click="clickDetail(item)">
				
				<img v-if="item.status==4 || item.status==5 "  style='width: 48rpx;height: 48rpx;' src="../static/show2.png" alt="">
				<img v-else style='width: 48rpx;height: 48rpx;' src="../static/show.png" alt="">
				<view class="ml20 flex-one">
					<view class="flex-between align-center mb20">
						<view class="f32 bold fontw no-warp-one" style="color:#2E2E2E">
							{{item.cn}}
						</view>
						<u-count-down :timestamp="item.m0" v-if="item.status==0 && item.is_pay==0" :show-hours="false"
							color="#FF4345" separator-color="#FF4345" @end="timeOutEnd(item, index)"></u-count-down>

						<!-- <text class="text-red-new f28" v-if="item.status == 0 && item.is_pay==0">去支付</text> -->
						<text class="text-red-new f28" v-if="item.status == 0 && item.is_pay == 1">出票中</text>
						<text class="text-red-new f28"
							v-if="(item.status == 2 || item.status == 1) && item.is_pay == 1">出票中</text>
						<text class="text-red-new f28" style="color: #FF4345;" v-if="item.status==3 && item.is_pay == 1">已出票</text>
						<text class="text-xsl f28" v-if="item.status == 4 && item.is_pay == 1">已完成</text>
						<text class="text-xsl f28" style="color: #999999;" v-if="item.status == 5 && item.is_pay == 1">已退款</text>
					</view>
					
					<view class=" flex-between align-center">
						<view class="">
							<view class="flex-start align-center f28 mb10" >
								<view class="mn medium">
									{{item.mn}}
								</view>
								<view style="color:#999999">{{item.count + '张'}}</view>
							</view>
							<view class="f24" style="color:#999999">
								<text>{{item.show_time | getWeekByDay}}</text>
								<text> {{item.show_time | formateDate('MM月DD日 HH:mm')}}</text>
							</view>
						</view>
						
						<view class="">
							<text class="toPay f22 flex-center align-center" v-if="item.status == 0 && item.is_pay==0">去支付</text>
							<view class="f28"
								:class="[item.status==4 || item.status==5 ? 'text-6d6d6d text-price':'fr text-price']"
								v-else>{{item.price * 1000 * item.count / 1000}}</view>
						</view>
					</view>
					<!-- <view class="cinema flex justify-between align-center">
						<view
							:class="[item.status==4 || item.status==5 ? 'fl text-6d6d6d text-lg' : 'fl text-black text-lg']">
							{{item.cn}}
						</view>
						<u-count-down :timestamp="item.m0" v-if="item.status==0 && item.is_pay==0" :show-hours="false"
							color="#f1255d" separator-color="#f1255d" @end="timeOutEnd(item, index)"></u-count-down>
						<view
							:class="[item.status==4 || item.status==5 ? 'text-6d6d6d text-price':'fr text-red-new text-price']"
							v-else>{{item.price * 1000 * item.count / 1000}}</view>
					</view>
					<view class="flex align-center  info">
						<view class="left-icon">
							<image v-if="item.status==4 || item.status==5 " class="ima"
								src="../../../subpages/static/gray.png" mode=""></image>
							<image v-else class="ima" src="../../../subpages/static/light.png" mode=""></image>
						</view>
						<view class="flex-treble">
							<view :class="[item.status==4 || item.status==5 ? 'text-6d6d6d' : 'text-black']">{{item.mn}}
								<view class="cu-tag line-gray sm radius margin-left-xs">{{item.count + '张'}}</view>
							</view>
							<view
								:class="[item.status==4 || item.status==5 ? 'text-gray margin-top-xs' : 'text-black margin-top-xs']">
								<text>{{item.show_time | getWeekByDay}}
									{{item.show_time | formateDate('MM月DD日 HH:mm')}}</text>
							</view>
						</view>
						<view class="flex-sub text-center">
							<text class="text-red-new text-lg" v-if="item.status == 0 && item.is_pay==0">去支付</text>
							<text class="text-red-new text-lg" v-if="item.status == 0 && item.is_pay == 1">出票中</text>
							<text class="text-red-new text-lg"
								v-if="(item.status == 2 || item.status == 1) && item.is_pay == 1">出票中</text>
							<text class="text-red-new text-lg" v-if="item.status==3 && item.is_pay == 1">已出票</text>
							<text class="text-xsl" v-if="item.status == 4 && item.is_pay == 1">已完成</text>
							<text class="text-xsl" v-if="item.status == 5 && item.is_pay == 1">已退款</text>
						</view>
					</view> -->
				</view>

			</view>
		</view>
		<!-- 无订单状态 start-->
		<view class="" v-if="list.length <= 0">
			<image src="@/static/img/other/no-img.png" mode="" class="cinimage"></image>
			<view class="orderfont">
				暂无订单，快去购票吧~
			</view>
		</view>
		<!-- 无订单状态 end-->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
		},
		methods: {
			timeOutEnd(row, index) {
				this.$api.releaseOrder({
					oid: row.id
				})
				this.list.splice(index, 1)
			},
			clickDetail(item) {
				if (item.status == 0 && item.is_pay == 0) {
					uni.navigateTo({
						url: `/subpages/seat/submit?oid=${item.id}&pay=1`
					})
				} else {
					uni.navigateTo({
						url: `/subpages/orderDetail/order-detail?no=${item.orderno}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderItem {
		.mn{
			position: relative;
			margin-right: 32rpx;
			color: #666666;
			&::after{
				content: '';
				position: absolute;
				background-color: rgb(170, 170, 170);
				width: 2rpx;
				height: 85%;
				top: 50%;
				transform: translateY(-50%);
				right: -16rpx;
			}
		}
		
		.toPay{
			width: 96rpx;
			height: 40rpx;
			color: white;
			background-color: #FF4345;
			border-radius: 60rpx;
		}
		
		
		.ima {
			width: 65rpx;
			height: 65rpx;
			border-radius: 50%;
		}

		.bg-white {
			background-color: #fff;
			color: #666;
		}

		.margin-bottom-sm {
			margin-bottom: 20rpx;
		}

		.grid {
			display: flex;
			flex-wrap: wrap;
		}


		.grid.col-1>view {
			width: 100%;
		}

		.justify-between {
			-webkit-box-pack: justify;
			justify-content: space-between;
		}

		.align-center {
			-webkit-box-align: center;
			align-items: center;
		}

		.flex {
			display: flex;
		}

		.line-black,
		.lines-black,
		.text-black {
			color: #333;
		}

		.text-lg {
			font-size: 32rpx;
		}

		.fl {
			float: left;
		}

		.line-red-new,
		.text-red-new {
			color: #FF4345;
			min-width: fit-content;
		}

		.fr {
			float: right;
		}

		.text-price:before {
			content: "¥";
			font-size: 80%;
			margin-right: 4rpx;
		}

		.solid-bottom:after {
			border-bottom: 1rpx solid rgba(0, 0, 0, .1);
		}

		.dashed-bottom:after,
		.dashed-left:after,
		.dashed-right:after,
		.dashed-top:after,
		.dashed:after,
		.solid-bottom:after,
		.solid-left:after,
		.solid-right:after,
		.solid-top:after,
		.solid:after,
		.solids-bottom:after,
		.solids-left:after,
		.solids-right:after,
		.solids-top:after,
		.solids:after {
			content: " ";
			width: 200%;
			height: 200%;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: inherit;
			transform: scale(.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
		}

		

		.padding-sm {
			padding: 20rpx;
		}

		.grid.col-1>view {
			width: 100%;
		}

		.align-center {
			-webkit-box-align: center;
			align-items: center;
		}

		.order-list .list-item .info .left-icon {
			width: 100rpx;
		}

		.text-sl {
			font-size: 80rpx;
		}

		.flex-treble {
			-webkit-box-flex: 3;
			flex: 3;
		}

		.line-black,
		.lines-black,
		.text-black {
			color: #333;
		}

		.line-black,
		.lines-black,
		.text-black {
			color: #333;
		}

		.margin-top-xs {
			margin-top: 10rpx;
		}

		.line-gray,
		.lines-gray,
		.text-gray {
			color: #aaa;
		}

		.margin-left-xs {
			margin-left: 10rpx;
		}

		.cu-tag.sm {
			font-size: 20rpx;
			padding: 0rpx 12rpx;
			height: 32rpx;
		}

		.cu-tag {
			font-size: 24rpx;
			vertical-align: middle;
			position: relative;
			display: -webkit-inline-box;
			display: -webkit-inline-flex;
			display: inline-flex;
			-webkit-box-align: center;
			align-items: center;
			-webkit-box-pack: center;
			justify-content: center;
			box-sizing: border-box;
			padding: 0rpx 16rpx;
			height: 48rpx;
			font-family: Helvetica Neue, Helvetica, sans-serif;
			white-space: nowrap;
		}

		.radius {
			border-radius: 6rpx;
		}

		.cu-tag[class*=line-]:after {
			content: " ";
			width: 200%;
			height: 200%;
			position: absolute;
			top: 0;
			left: 0;
			border: 1rpx solid;
			transform: scale(.5);
			transform-origin: 0 0;
			box-sizing: border-box;
			border-radius: inherit;
			z-index: 1;
			pointer-events: none;
		}

		.text-center {
			text-align: center;
		}

		.flex-sub {
			-webkit-box-flex: 1;
			// flex: 1;
		}

		.text-xsl {
			font-size: 32rpx;
			color: #666666;
			min-width: fit-content;
		}

		.list-item {
			border-radius: 16rpx;
			padding: 32rpx 20rpx;

			.info {
				height: 150rpx;

				.left-icon {
					width: 100rpx;

				}
			}
		}

		.cinimage {
			margin-top: 150rpx;
			width: 750rpx;
			height: 304rpx;
		}

		.orderfont {
			color: #666;
			margin-top: 40rpx;
			font-size: 32rpx;
			text-align: center;
		}
	}
</style>
